<template>
	<div>
		<el-table ref="tableRef" style="width: 100%" border v-bind="$attrs">
			<!-- 复选框 -->
			<el-table-column v-if="table.showSelect" :fixed="table.showFixed" type="selection" width="55px" align="center" />
			<!-- 序号 -->
			<el-table-column v-if="table.showIndex" :fixed="table.showFixed" type="index" label="序号" width="80px" align="center"></el-table-column>
			<!-- 内容 -->
			<el-table-column
				v-for="item in table.propList"
				:key="item.prop"
				:fixed="item.fixed"
				:prop="item.prop"
				:label="item.label"
				:width="item.width || '—'"
				:align="item.align || 'center'"
				:header-align="item.headerAlign || 'center'"
			>
				<template #default="scope">
					<slot :name="item.slotName" :row="scope.row">
						{{ item.prop ? scope.row[item.prop] : '' }}
					</slot>
				</template>
				<template v-for="(value, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}" /></template>
			</el-table-column>
			<template v-for="(value, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData || {}" /></template>
		</el-table>

		<!-- 分页 -->
		<template v-if="table.showFooter">
			<div class="pagination">
				<el-pagination
					v-bind="$attrs"
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.pageNum"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				>
				</el-pagination>
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
const { proxy, ctx }: any = getCurrentInstance()

const emit = defineEmits(['getDataList'])
const props = defineProps({
	table: {
		type: Object,
		required: true
	},
	page: {
		type: Object,
		default: () => {
			return { pageNum: 1, pageSize: 10 }
		}
	}
})

/** 分页 */
const handleSizeChange = (val: number) => {
	props.page.pageSize = val
	emit('getDataList')
}
const handleCurrentChange = (val: number) => {
	props.page.pageNum = val
	emit('getDataList')
}

/** */
const tableRef: any = ref(null)
onMounted(() => {
	// 表格 ref赋值
	const entries = Object.entries(tableRef.value)
	for (const [key, value] of entries) {
		proxy[key] = value
	}
})

// 表格 ref导出
defineExpose(proxy)
</script>

<style scoped lang="scss">
.pagination {
	margin-top: 20px;
}
:deep(.el-pagination) {
	justify-content: flex-end;
}
</style>
